<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            li{
                width: 100px;
            }
       #li1{
           background-color: hotpink;
       }
       #li2{
           background-color: green;
       }
       #li3{
           background-color: gold;
       }
       #li4{
           background:rebeccapurple; 
       }
        </style>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
        <script src="jquery-ui.min.js"> </script>
        <script >
             $(document).ready(function(){
                 $("#sortable").sortable();
             });
        </script>
        <link rel="stylesheet" href="jquery-ui.min.css">
    </head>
    <body>
       
        <ul id="sortable">
            <li id="li1">苹果</li>
            <li id="li2">句子</li>
            <li id="li3">香蕉</li>
            <li id="li4">甘蔗</li>
        </ul>
    </body>
</html>